<!DOCTYPE html> 
<html lang="en"> 
<head> 
<!-- Meta Tags --> 
	<title>P.L.D. Guide</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<meta name="application-name" content="Presentation Layer Development Guide by Cristian Cortez"/>
	<meta name="author" content="Cristian Cortez"/>  
	<meta name="keywords" content="cristian, cortez, crisboot" /> 
	<link rel="stylesheet" type="text/css" media="screen" href="./css/main.css" />
	<script type="text/javascript" src="./js/jquery.min.js"></script>
	<!--[if IE]>
		<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]--> 
	<script type="text/javascript" src="./js/html5.js"></script> 
	<script type="text/javascript" src="./js/jquery.anchor.js"></script> 
	<script type="text/javascript" src="./js/jquery.roundabout.min.js"></script> 
	<script type="text/javascript">
		$(document).ready(function(){
			
			 $('ul.pages-list').roundabout({
		         duration: 1200 // in milliseconds, of course
		      }).hover(
						function() {
							// oh no, it's the cops!
							clearInterval(interval);
						},
						function() {
							// false alarm: PARTY!
							interval = startAutoPlay();
						}
					);
				
				// let's get this party started
				interval = startAutoPlay();

				//$('.templates-list').roundabout();
		});
		
		function startAutoPlay() {
			return setInterval(function() {
				$('ul.pages-list').roundabout_animateToNextChild();
				//$('ul.pages-list').roundabout_adjustBearing(1.0);
			}, 1000);
		}
	</script> 
</head>
<body>
	<div class="mod-menu-bar">
	  <header> 
	    <h1>Presentation Layer Development Guide</h1>
		<a class="mod-tweet-link" href="http://twitter.com/cortezcristian" target="_blank">P.L.D. Guide</a>
	    <nav> 
	      <ul> 
		<li><a class="anchorLink active" href="#pages">Pages</a></li> 
		<li><a class="anchorLink" href="#templates">Templates</a></li> 
		<li><a class="anchorLink" href="#containers">Containers</a></li> 
		<li><a class="anchorLink" href="#modules">Modules</a></li> 
	      </ul> 
	    </nav> 
	  </header> 
	</div>
	<div class="main-wrap">
		<section id="pages">
			<h2>Sample Project</h2>
			<ul class="pages-list">
			   <li>Page 1</li>
			   <li>Page 2</li>
			   <li>Page 3</li>
			   <li>Page 4</li>
			   <li>Page 5</li>
			   <li>Page 6</li>
			   <li>Page 7</li>
			   <li>Page 8</li>
			   <li>Page 9</li>
			   <li>Page 10</li>
			</ul>
				<table class="mod-table">
			   <caption>Sample Project</caption>
			   <thead>
			      <tr>
					<th>Templates</th>
					<th>Containers</th>
					<th>Modules</th>
					<th>Pages</th>
			      </tr>
			   </thead>
			  <tbody>
  			      <tr>
					<td>
						<ul>
							<li><h3>Basic</h3></li>
							<li><a href="#" target="_blank">Template 1</a></li>
							<li><a href="#" target="_blank">Template 2</a></li>
							<li><a href="#" target="_blank">Template 3</a></li>
							<li><a href="#" target="_blank">Template 4</a></li>
						</ul>
						
						<ul>
							<li><h3>With Neck</h3></li>
							<li><a href="#" target="_blank">Template 5</a></li>
							<li><a href="#" target="_blank">Template 6</a></li>
							<li><a href="#" target="_blank">Template 7</a></li>
							<li><a href="#" target="_blank">Template 8</a></li>
						</ul>
						
						<ul>
							<li><h3>Search and Social</h3></li>
							<li><a href="#" target="_blank">Template 9</a></li>
							<li><a href="#" target="_blank">Template 10</a></li>
						</ul>
					</td>
					<td>
						<ul>
							<li><h3>Basic Containers</h3></li>
							<li><a href="#" target="_blank">Header</a></li>
							<li><a href="#" target="_blank">Body</a></li>
							<li><a href="#" target="_blank">Left</a></li>
							<li><a href="#" target="_blank">Right</a></li>
						</ul>
						
						<ul>
							<li><h3>Extended Containers</h3></li>
							<li><a href="#" target="_blank">Neck</a></li>
							<li><a href="#" target="_blank">Search</a></li>
							<li><a href="#" target="_blank">Social</a></li>
						</ul>
					</td>
					<td>
						<ul>
							<li><h3>Default Modules</h3></li>
							<li><a href="#" target="_blank">Module 1</a></li>
							<li><a href="#" target="_blank">Module 2</a></li>
							<li><a href="#" target="_blank">Module 3</a></li>
							<li><a href="#" target="_blank">Module 4</a></li>
						</ul>
						
						<ul>
							<li><h3>Optional Modules</h3></li>
							<li><a href="#" target="_blank">Module 5</a></li>
						</ul>
					</td>
					<td>						
						<ul>
							<li><h3>Informational Pages</h3></li>
							<li><a href="#" target="_blank">Page 1</a></li>
							<li><a href="#" target="_blank">Page 2</a></li>
							<li><a href="#" target="_blank">Page 3</a></li>
							<li><a href="#" target="_blank">Page 4</a></li>
						</ul>
						
						<ul>
							<li><h3>Commercial Pages</h3></li>
							<li><a href="#" target="_blank">Page 5</a></li>
							<li><a href="#" target="_blank">Page 6</a></li>
							<li><a href="#" target="_blank">Page 7</a></li>
							<li><a href="#" target="_blank">Page 8</a></li>
							<li><a href="#" target="_blank">Page 9</a></li>
							<li><a href="#" target="_blank">Page 10</a></li>
						</ul>					
						
					</td>
			      </tr>
				 <tbody>
				 <tfoot>
					<tr>
						<td colspan="4">Presentation Layer Development Guide</td>
					</tr>
				 </tfoot>
			</table>		
		</section>
		<section id="templates">
			<h2>Templates</h2>
			<h3>Basic Templates</h3>
			<ul class="templates-list">
				<li>
					<a href="" class="mini-tem">
						<span class="mini-con mini-con-header">header</span>
						<span class="mini-con mini-con-body">body</span>
						<span class="mini-con mini-con-footer">footer</span>
					</a>
				</li>
				<li>
					<a href="" class="mini-tem">
						<span class="mini-con mini-con-header">header</span>
						<span class="mini-con mini-con-left">left</span>
						<span class="mini-con mini-con-body-1">body</span>
						<span class="mini-con mini-con-footer">footer</span>
					</a>
				</li>
				<li>
					<a href="" class="mini-tem">
						<span class="mini-con mini-con-header">header</span>
						<span class="mini-con mini-con-body-1">body</span>
						<span class="mini-con mini-con-right">right</span>
						<span class="mini-con mini-con-footer">footer</span>
					</a>
				</li>
				<li>
					<a href="" class="mini-tem">
						<span class="mini-con mini-con-header">header</span>
						<span class="mini-con mini-con-left">left</span>
						<span class="mini-con mini-con-body-2">body</span>
						<span class="mini-con mini-con-right">right</span>
						<span class="mini-con mini-con-footer">footer</span>
					</a>
				</li>
			</ul>
			<h3>Templates with Neck</h3>
			<ul class="templates-list">
				<li>
					<a href="" class="mini-tem">
						<span class="mini-con mini-con-header">header</span>
						<span class="mini-con mini-con-neck">neck</span>
						<span class="mini-con mini-con-body">body</span>
						<span class="mini-con mini-con-footer">footer</span>
					</a>
				</li>
				<li>
					<a href="" class="mini-tem">
						<span class="mini-con mini-con-header">header</span>
						<span class="mini-con mini-con-neck">neck</span>
						<span class="mini-con mini-con-left">left</span>
						<span class="mini-con mini-con-body-1">body</span>
						<span class="mini-con mini-con-footer">footer</span>
					</a>
				</li>
				<li>
					<a href="" class="mini-tem">
						<span class="mini-con mini-con-header">header</span>
						<span class="mini-con mini-con-neck">neck</span>
						<span class="mini-con mini-con-body-1">body</span>
						<span class="mini-con mini-con-right">right</span>
						<span class="mini-con mini-con-footer">footer</span>
					</a>
				</li>
				<li>
					<a href="" class="mini-tem">
						<span class="mini-con mini-con-header">header</span>
						<span class="mini-con mini-con-neck">neck</span>
						<span class="mini-con mini-con-left">left</span>
						<span class="mini-con mini-con-body-2">body</span>
						<span class="mini-con mini-con-right">right</span>
						<span class="mini-con mini-con-footer">footer</span>
					</a>
				</li>
			</ul>
			<h3>Templates with Search and Social</h3>
			<ul class="templates-list">
				<li>
					<a href="" class="mini-tem">
						<span class="mini-con mini-con-header">header</span>
						<span class="mini-con mini-con-neck">neck</span>
						<span class="mini-con mini-con-left-1">left</span>
						<span class="mini-con mini-con-search">Search</span>
						<span class="mini-con mini-con-social">Social</span>
						<span class="mini-con mini-con-body-1">body</span>
						<span class="mini-con mini-con-footer">footer</span>
					</a>
				</li>
				<li>
					<a href="" class="mini-tem">
						<span class="mini-con mini-con-header">header</span>
						<span class="mini-con mini-con-neck">neck</span>
						<span class="mini-con mini-con-search">Search</span>
						<span class="mini-con mini-con-social">Social</span>
						<span class="mini-con mini-con-right-1">right</span>
						<span class="mini-con mini-con-body-1">body</span>
						<span class="mini-con mini-con-footer">footer</span>
					</a>
				</li>
			</ul>
		</section> 
		<section id="containers">
			<h2>Containers</h2>
			
		</section> 
		<section id="modules">
			<h2>Modules</h2>
		</section> 
	</div>
	
	<footer>
		<div class="mod-footer">
			<p>
				<a href="http://www.w3.org/html/logo/"> 
					<img src="img/HTML5_Logo_32.png" alt="HTML5" title="HTML5"> 
				</a>
				&copy;2011 by Cristi&aacute;n Cort&eacute;z
			</p>
		</div>
	</footer>
	
	
	
</body>
</html>

